<template>
  <div>

    <shared-header>
      <template v-slot:center>
        农历日期输入
      </template>
    </shared-header>

<!--    {{ formData }}-->

    <app-form ref="formOptions" v-model:currentData="formData" :form-items="formItems" button-name="保存"
              class=" full-height"
              @onSubmit="submit" />

    <!--    <van-form class="q-mt-md" @submit="submit(formData)">-->
    <!--      &lt;!&ndash;      <van-field v-model="formData.name" label="名称" placeholder="请输入事件名称" />&ndash;&gt;-->
    <!--      &lt;!&ndash;      <van-cell :value="formData.lunarDate.join('-')" is-link title="阴历日期" @click="showLunarSelector = true" />&ndash;&gt;-->
    <!--      &lt;!&ndash;      <van-cell :value="formData.solarDate" label="相对应的阳历日期" title="日期" />&ndash;&gt;-->
    <!--      <div class="q-mx-md ">-->
    <!--        &lt;!&ndash;        <div class="row justify-between q-my-md">&ndash;&gt;-->
    <!--        &lt;!&ndash;          <div>是否农历日期</div>&ndash;&gt;-->
    <!--        &lt;!&ndash;          <van-switch v-model="formData.isLunar" />&ndash;&gt;-->
    <!--        &lt;!&ndash;        </div>&ndash;&gt;-->
    <!--        <div class="row justify-between q-my-md">-->
    <!--          <div>是否置顶</div>-->
    <!--          <van-switch v-model="formData.isTop" />-->
    <!--        </div>-->
    <!--      </div>-->


    <!--      <div style="margin: 16px;">-->
    <!--        <van-button block native-type="submit" round type="primary">-->
    <!--          提交-->
    <!--        </van-button>-->
    <!--      </div>-->
    <!--    </van-form>-->

    <!--    <van-popup-->
    <!--      v-model:show="showLunarSelector"-->
    <!--      position="bottom"-->
    <!--    >-->
    <!--      <van-date-picker-->
    <!--        v-model="formData.lunarDate"-->
    <!--        :max-date="maxDate"-->
    <!--        :min-date="minDate"-->
    <!--        title="请选择阴历日期"-->
    <!--        @cancel="showLunarSelector=false"-->
    <!--        @confirm="onConfirm"-->
    <!--      />-->
    <!--    </van-popup>-->

  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import sharedHeader from "@/components/sharedHeader.vue";
import type { dateInfoInterface } from "@/stores/commonStore";
import { useCommonStore } from "@/stores/commonStore";
import { useRouter } from "vue-router";

export default {
  name: "dataConverter",
  components: { sharedHeader },
  setup() {
    const commonStore = useCommonStore();
    const router = useRouter();


    const required = function(val: any) {
      return val !== "" && val != null;
    };
    const formItems = ref([
      {
        field: "name",
        type: "text",
        label: "事件名称",
        required:true,
        rules: [{
          validator: required || "必填"
        }]
      },
      {
        field: "isLunar",
        type: "switch",
        label: "是否使用农历日期",
      },
      {
        field: "usedQuick",
        type: "switch",
        label: "是否使快捷输入",

      },
      {
        field: "lunarDate",
        type: "text",
        label: "农历日期(格式:2001/01/01)",
        dateType: "yyyy/MM/dd",
        showOn: function(formData: dateInfoInterface) {
          return formData.isLunar && formData.usedQuick;
        },
        required:true,
        show: false,
      },
      {
        field: "solarDate",
        type: "text",
        label: "公历日期(格式:2001/01/01)",
        dateType: "yyyy/MM/dd",

        showOn: function(formData: dateInfoInterface) {
          return !formData.isLunar && formData.usedQuick;
        },
        show: false,
        required:true,
      },
      {
        field: "lunarDate",
        type: "timePicker",
        label: "农历日期",
        dateType: "yyyy/MM/dd",
        showOn: function(formData: dateInfoInterface) {
          return formData.isLunar && !formData.usedQuick;
        },
        show: false,
        required:true,
      },
      {
        field: "solarDate",
        type: "timePicker",
        label: "公历日期",
        dateType: "yyyy/MM/dd",

        showOn: function(formData: dateInfoInterface) {
          return !formData.isLunar && !formData.usedQuick;
        },
        show: false,
        required:true,
      },
      {
        field: "isTop",
        type: "switch",
        label: "是否置顶",
      }
    ]);

    const formData = ref(
      {
        name: "",
        usedQuick: false,
        solarDate: null, // 输入农历日期
        lunarDate: null,//阳历日期
        isLunar: true, // 是否是农历日期
        isTop: false // 顶部展示
      }
    );


    // const showLunarSelector = ref(false);

    // const converter = function(lunarArr: string[]) {
    //   // lunar = [  1999, 12,  25 ]
    //   const { year, month, day } = LunarCalendar.lunarToSolar(lunarArr[0], lunarArr[1], lunarArr[2]);
    //   // lunarToSolar
    //   // formData.value.lunarDate = lunarArr.join('-')
    //
    //   formData.value.solarDate = year + "-" + month + "-" + day;
    // };
    //
    // converter(formData.value.lunarDate);

    // const onConfirm = (value: any) => {
    //   // console.log(value);
    //   let lunarArr = value.selectedValues;
    //   converter(lunarArr);
    //   showLunarSelector.value = false;
    // };

    //提交保存
    const submit = (formData: dateInfoInterface) => {
      if (formData.isLunar) {//农历日期
        delete formData.solarDate;
      } else {
        delete formData.lunarDate;
      }

      const { setDateInfo } = useCommonStore();
      setDateInfo(formData);
      router.push({ name: "index" });

    };

    return {
      formItems,
      commonStore,
      formData,

      submit

    };
  }

};
</script>

